import React, {Component} from 'react';
import {
    StyleSheet,
    Image,
    TouchableOpacity
} from 'react-native';
import {View, Text, LoaderScreen} from 'react-native-ui-lib'
import {UltimateListView} from "react-native-ultimate-listview";
import IconBadge from 'react-native-icon-badge';

//自定义文件
import Global from '../common/global'
import colors from '../common/colors'
import Util from "../common/util";
import Api from "../common/api";
import {Toast} from "teaset";

export default class Notice extends Component {
    static navigationOptions = ({navigation, screenProps}) => ({
        title: '公告信息',
        color: colors.primaryColor,
        tabBarIcon: ({focused, tintColor}) => {
            if (focused) {
                return (
                    <IconBadge
                        BadgeElement={
                            <Text style={{color: '#FFFFFF'}}>5</Text>
                        }
                        MainElement={
                            <View style={{width: 45, height: 35, alignItems: 'center', justifyContent: 'center'}}>
                                <Image source={require('../images/tabbar_icon_noticed.png')}
                                       style={{width: 25, height: 25}}
                                />
                            </View>
                        }
                    />
                )
            } else {
                return (
                    <IconBadge
                        BadgeElement={
                            <Text style={{color: '#FFFFFF'}}>5</Text>
                        }
                        MainElement={
                            <View style={{width: 45, height: 35, alignItems: 'center', justifyContent: 'center'}}>
                                <Image source={require('../images/tabbar_icon_notice.png')}
                                       style={{width: 25, height: 25}}
                                />
                            </View>
                        }
                    />
                )
            }
        },
        headerBackTitle: null,
    })


    constructor(props) {
        super(props);
        this.state = {
            loadError: false
        };
    }

    renderHeader = () => {
        return (
            <View
                height={Global.headerHeight}
                width={Global.width}
                center
                style={{
                    paddingTop: Global.paddingTop,
                    backgroundColor: '#176DD7'
                }}>
                <Text
                    text60 style={{
                    color: '#fff',
                    fontWeight: 'bold',
                }}>
                    公告信息
                </Text>
            </View>
        )
    }

    renderItem = (item) => {
        return (
            <TouchableOpacity activeOpacity={0.8} onPress={() => this.pressItem(item)}>
                <View height={60} width={Global.width} paddingH-12 paddingV-10 centerV bg-white row>
                    <View flex height={40} style={{justifyContent: 'space-between'}}>
                        <Text style={{color: '#333333', fontSize: 16}}>{item.title}</Text>
                        <Text style={{color: '#9E9E9E', fontSize: 12}}>{item.ctime}</Text>
                    </View>
                    <Image style={{width: 17, height: 17}} source={require('../images/ico_go_grey.png')}/>
                </View>
            </TouchableOpacity>
        )
    }

    pressItem = (item) => {
        this.props.navigation.navigate('NoticeDetail', {
            notice: item
        })
    }

    onFetch = (page = 1, startFetch, abortFetch) => {
        Util.fetchPost(Api.notice, {page, limit: Global.pageSize})
            .then(({code, msg, data}) => {
                if (code == 0) {
                    startFetch(data.list, Global.pageSize);
                } else {
                    abortFetch()
                }
            }).catch(error => {
            abortFetch(); //manually stop the refresh or pagination if it encounters network error
            console.log(error);
            Toast.fail('网络开小差了，请稍候再试');
        });
    };

    renderSeparator = () => {
        return (
            <View style={{height: 1, backgroundColor: '#fff', width: 12}}/>
        )
    }

    renderEmptyView = () => {
        return (
            <View center style={{height: Global.bodyHeight - Global.paddingBottom - 50}}>
                <Text style={{fontSize: 16, color: '#ccc'}}>暂无公告信息</Text>
            </View>
        )
    }

    renderPaginationFetchingView = () => {
        return (
            <View center style={{height: Global.bodyHeight - Global.paddingBottom - 50}}>
                <LoaderScreen
                    color={colors.primaryColor}
                    message="加载中..."
                    overlay
                />
            </View>
        )
    }

    render() {
        return (
            <View flex style={{backgroundColor: colors.bgColor}}>
                {this.renderHeader()}
                <UltimateListView
                    ref="_listview"
                    onFetch={this.onFetch}
                    keyExtractor={(item, index) => ("item" + index)}  //this is required when you are using FlatList
                    refreshableMode={"basic"}//basic or advanced
                    item={this.renderItem}  //this takes three params (item, index, separator)
                    numColumns={1} //to use grid layout, simply set gridColumn > 1
                    paginationFetchingView={this.renderPaginationFetchingView}
                    waitingSpinnerText={"加载中..."}
                    emptyView={this.renderEmptyView}
                    separator={this.renderSeparator}
                    allLoadedText={""}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({});
